<template>
  <div class="user-add">
    <div class="title-msg">用户添加</div>

    <div class="option-site">
      <div class="back" @click="backClick">《返回</div>

      <div class="account item">
        <span>用户账号:</span>
        <NumInput
                :p-input-style="{'width': '280px'}"
                p-placeholder="请输入10位纯数字用户账号..."
                :pMaxLength="10"
                v-model="formData.username"
                @mBlur="mUsernameBlur"
                class="input"></NumInput>
      </div>

      <div class="password item">
        <span>用户密码:</span>
        <OrdInput
                :p-input-style="{'width': '280px'}"
                p-placeholder="请输入8到17位用户密码..."
                :pMaxLength="17"
                v-model="formData.password"
                @mBlur="mUserPwdBlur"
                class="input"></OrdInput>
      </div>

      <div class="name-sex-business item">
        <span class="span-name">姓名:</span>
        <OrdInput
                :p-input-style="{'width': '120px'}"
                p-placeholder="请输入用户姓名..."
                :pMaxLength="8"
                v-model="formData.name"
                class="input name"></OrdInput>

        <select class="sex" v-model="formData.sex">
          <option value="1">男</option>
          <option value="2">女</option>
        </select>

        <select class="business" v-model="formData.business">
          <option value="1">商家</option>
          <option value="2" selected>非商家</option>
        </select>

      </div>

      <div class="birthday item">
        <Calendar title="出生日期:"
                  :p-date="formData.birthday"
                  @changeDate="date => this.formData.birthday = date"
        ></Calendar>
      </div>

      <div class="money item">
        <span>资金:</span>
        <NumInput :p-input-style="{'width': '60px'}"
                  p-placeholder="资金..."
                  :pMaxLength="12"
                  v-model="formData.money"
                  class="input"></NumInput>
      </div>

      <div class="tel item">
        <span>手机号码:</span>
        <NumInput :p-input-style="{'width': '280px'}"
                  p-placeholder="请输入11位纯数字手机号..."
                  :pMaxLength="11"
                  v-model="formData.tel"
                  @mBlur="mUserTelBlur"
                  class="input"
        ></NumInput>
      </div>

      <div class="address item">
        <span>地址信息:</span>
        <OrdInput :p-input-style="{'width': '280px'}"
                  p-placeholder="请输入用户地址..."
                  :pMaxLength="40"
                  v-model="formData.address"
                  @mBlur="mUserAddressBlur"
                  class="input"></OrdInput>
      </div>

      <div class="submit item">
        <button @click="submitClick">确 认 添 加</button>
      </div>



    </div>

  </div>
</template>

<script>
  // 引入公共组件
  import NumInput from 'components/common/input/numInput/IInput'
  import OrdInput from 'components/common/input/ordInput/IInput'
  import Calendar from "components/common/calendar/Calendar";

  // 完善用户信息的网络请求方法
  import {prefectUserInfo} from 'network/user'
  import {searchUserByUsername} from 'network/mix'
  import {register} from 'network/noVer'

  export default {
    inject: ['reload'],
    name: "UserAdd",
    components: {
      NumInput,
      OrdInput,
      Calendar,
    },
    data() {
      return {
        formData: {
          username: '',
          password: '',
          name: '',
          sex: 1,
          business: 2, // 默认不是商家
          birthday: new Date(),
          tel: '',
          address: '',
          money: '300',
        },
        accountVer: false, // 账号合法标志
        pwdVer: false, // 密码合法标志
        telVer: false, // 电话合法标志
        addressVer: false, // 地址合法标志

      }
    },
    methods: {

      submitClick() {
        if (this.accountVer && this.pwdVer && this.telVer && this.addressVer) {
          this.mAddUser(this.formData.username, this.formData.password)
        } else {
          this.$err_ty_toast.toShow('添加用户' + this.formData.username + '失败,请检查你的输入是否合法！！！', 2000)
        }
      },
      backClick() {
        this.$router.push('/admin/user')
      },

      /**文本框验证的所有函数*/
      mUsernameBlur(value) { // username用户名文本框失去焦点执行的函数
        if (value.length === 10) { // 如果长度合法
          searchUserByUsername(value)
            .then(result => {
              // console.log('-----' + result);
              // console.log(result);
              if (result.code === 200) {
                this.$err_ty_toast.toShow(value + '账号已经存在,不可注册', 2000)
                this.accountVer = false

              } else if (result.code === 401){
                this.$mes_ty_toast.toShow(value + '账号可以注册', 2000)
                this.accountVer = true

              }
            })
            .catch(error => {
              console.log('----------' + error)
              this.accountVer = false
            })
        } else {
          this.$err_ty_toast.toShow('请设置账号保持10位', 2000)
          this.accountVer = false
        }
      },
      mUserPwdBlur(value) { // password密码文本框失去焦点执行的函数
        if (value.length < 8 || value.length > 17) {
          this.$err_ty_toast.toShow('请保证密码在8位到17位之间！！！', 2000)
          this.pwdVer = false

        } else {
          this.pwdVer = true

        }
      },
      mUserTelBlur(value) { // tel电话框失去焦点执行的函数
        if (value.length === 11) {
          this.telVer = true
        } else {
          this.telVer = false
          this.$err_ty_toast.toShow('请保证电话号码为11位！！！', 2000)
        }
      },
      mUserAddressBlur(value) { // address地址框失去焦点执行的函数
        if (value) {
          this.addressVer = true
        } else {
          this.addressVer = false;
          this.$err_ty_toast.toShow('为了确保用户能够正常的接收物流,请填写地址信息！！！', 2000)
        }
      },

      /**
       * axios的网络请求
       */
      async mAddUser(username, password) {
        await register(username, password)
          .then(result => {
            // if (result.code === 200) {
            //   this.$succ_ty_toast.toShow('添加用户' + this.formData.username + '成果', 5000)
            // }
          })
        // , name, sex, business, birthday, tel, address, money
        await prefectUserInfo(this.formData)
          .then(res => {
            console.log(res);
            if (res.code === 200) { // code为200表示完善信息成功
              // this.reload(); // 刷新当前页面,使用App根组件内定义的刷新方法,这样子不会出现空白页,且不会把要刷新页所展示的信息提示吐司信息窗刷掉(this.$router.go(0)方法会出现空白页,且会把信息吐司窗刷新掉)
              this.$succ_ty_toast.toShow('添加用户' + this.formData.username + '成果', 5000);
              this.$router.go(0)
            } else if (res.code === 500) {
              // this.reload(); // 刷新当前页面
              this.$err_ty_toast.toShow('添加用户' + this.formData.username + '失败！！！', 5000);
              this.$router.go(0)
            }


          })
          .catch(err => {
            console.log('<完善信息>网络请求函数问题' + err);
          })
      },
    }
  }
</script>

<style scoped>
  .title-msg {
    height: 60px;
    line-height: 60px;
    margin-left: 20px;
    margin-right: 20px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
    border: 1px solid #cdcdcd;

    text-align: center;
    font-size: 30px;

    background-color: white;
  }
  .option-site {
    margin-top: 30px;
    margin-left: 20px;
    margin-right: 20px;
    height: 530px;

    border: 1px solid #cdcdcd;
    border-radius: 6px;
    background-color: #ebebeb;

    /*background-color: green;*/
  }
  .option-site .back {
    position: absolute;
    width: 50px;
    height: 25px;

    color: #919191;
    font-weight: bold;
    font-size: 16px;

    background-color: #fff;
    border-top-left-radius: 6px;
  }
  .option-site .back:hover {
    cursor: pointer;
    color: black;
    opacity: 0.75;
  }
  .user-add {
    height: 100%;

    /*background-color: red;*/
  }
  .item {
    margin-top: 1.5%;
    margin-left: 35%;

    height: 50px;
    width: 30%;
    line-height: 50px;

    /*background-color: yellow;*/
  }
  .item span {
    color: #4c4c4c;
    font-weight: bold;
  }
  .item .input {
    margin-top: 10px;
  }
  .name-sex-business {
    position: relative;
    margin-left: 35%;

    width: 30%;
  }
  .name-sex-business .sex {
    position: absolute;
    top: 10px;
    left: 47%;
    width: 70px;
    height: 30px;
  }
  .name-sex-business .business {
    position: absolute;
    top: 10px;
    left: 70%;

    width: 80px;
    height: 30px;
  }

  .birthday {
    margin-left: 45%;
    padding-left: 30px;
    width: 235px;
  }
  .money {
    position: absolute;
    margin-left: 34%;
    margin-top: -50px;

    width: 100px;
  }

  .submit {
    padding-left: 40px;
  }
  .submit button {
    width: 280px;
    height: 35px;

    color: white;
    font-weight: bold;
    font-size: 20px;

    border-radius: 6px;
    outline: none;
    border: none;
    background-color: #28a745;
  }
  .submit button:hover {
    cursor: pointer;
    opacity: 0.75;
  }

</style>